<template>
  <div class="search">
    <div class="search-header">
      <div class="goback-btn" @click="goback">
        <span class="iconfont icon-fanhui"></span>
      </div>
      <div class="search-inp">
        <van-search
          input-align="center"
          shape="round"
          placeholder="请输入您想购买的商品"
        />
      </div>
      <div class="search-btn"><div class="btn">搜索</div></div>
    </div>
    <div class="search-wrap">
      <div class="hot-search">热门搜索</div>
      <div class="wrap-hidden" @click="changeHiddenFlag">
        {{ hiddenFlag ? "隐藏" : "显示" }}
      </div>
      <div class="wrap" v-if="hiddenFlag">
        <li>办公室靠枕</li>
        <li>剃须刀电动</li>
        <li>核桃手串</li>
        <li>羽毛球拍</li>
        <li>吹风机静音</li>
        <li>游戏显卡</li>
        <li>懒人减肥记</li>
        <li>儿童遥控飞机</li>
        <li>燃气壁挂炉</li>
      </div>
      <div class="wrap-hidden-over" v-else>已隐藏搜索发现</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      hiddenFlag: true,
    };
  },
  methods: {
    changeHiddenFlag() {
      this.hiddenFlag = !this.hiddenFlag;
    },
    goback() {
      this.$router.go(-1);
    },
  },
};
</script>
<style lang="less" scoped>
@import "@styles/index.less";
.search {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: #f6f6f6;
  z-index: 5;
  .search-header {
    display: flex;
    background: #ffffff;
    border-bottom: 1px solid rgba(128, 128, 128, 0.403);
    .wh(375,44);
    .goback-btn {
      .wh(40,44);
      .lh(44);
      text-align: center;
      .icon-fanhui {
        .fs(20);
        font-weight: bolder;
      }
    }
    .search-inp {
      .wh(273,44);
      display: flex;
      align-items: center;
      /deep/.van-search {
        .wh(350,30);
      }
    }
    .search-btn {
      .wh(55,44);
      display: flex;
      align-items: center;
      .btn {
        .wh(40,28);
        .lh(28);
        text-align: center;
        background: #e93b3d;
        color: #fff;
        .fs(16);
        border-radius: 5px;
      }
    }
  }
  .search-wrap {
    position: relative;
    .wh(375, 144);
    background: #ffffff;
    .hot-search {
      .wh(110,30);
      float: left;
      .margin(15,0,0,15);
      .fs(18);
    }
    .wrap-hidden {
      .wh(30,20);
      float: right;
      .margin(15,15,0,0);
      color: gray;
      .fs(14);
    }
    .wrap {
      position: absolute;
      .top(50);
      .wh(330,100);
      .left(20);
      display: flex;
      flex-wrap: wrap;
      li {
        .wh(77,20);
        border: 0;
        border-radius: 10px;
        text-align: center;
        .lh(20);
        .fs(10);
        color: gray;
        .margin(0,5,0,0);
        background: #f0f2f5;
      }
    }
    .wrap-hidden-over {
      position: absolute;
      .top(80);
      .wh(375,100);
      text-align: center;
      color: gray;
    }
  }
}
</style>
